<template>
  <div class="sanstyle" style="position: relative">
    <!--左边 B-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <!-- 全部是种类数量设计 -->
        <myTotal :wuzhong="wuzhong"></myTotal>
        <!-- 动物种类统计 -->
        <myZoon :animals="animals" :key="'0' + Date.now()"></myZoon>
        <!-- 动物保护等级统计 -->
        <myZoonclass :animalsprotection="animalsprotection" :key="'1' + Date.now()"></myZoonclass>
        <!-- 动物IUCN红色名录统计 -->
        <myIucn :Animaliucn="Animaliucn" :key="'2' + Date.now()"></myIucn>
        <div class="zylb">
        </div>
        <!--资源列表 E-->
      </div>
    </div>
    <!--左边 E-->

    <!--中间 B-->
    <div style="position: relative" class="center_box">
      <!-- 地图 -->
      <div class="map_box" id="map" style="position: relative;">
        <div class="control">
          <div class="l_1" title="点" @click.prevent="btnToggle1">
            <img src="../../static/mapimg/dw.png" alt="">
          </div>
          <div class="l_1" title="面" @click.stop="btnToggle2">
            <img src="../../static/mapimg/tc.png" alt="">
          </div>

          <div class="zdy">
            <el-select v-model="state1" class="el-input1" :popper-append-to-body="Toggle" @visible-change="btn_qh"
              style="border-radius: .04rem  0  0 .04rem ;z-index: 999;" :key="Math.random()">
              <el-option label="动物" value="动物" ></el-option>
              <el-option label="植物" value="植物" ></el-option>
            </el-select>
            <el-input placeholder="请输入物种名称" v-model="keywords" class="input-with-select" style="border-radius: 0 .04rem .04rem 0;" @input="getsl()"
              v-clickoutside="handleClose">
              <el-button slot="append" icon="el-icon-search" @click.prevent="btn_ss"></el-button>
            </el-input>
            <!-- 控制台 -->
            <!-- 点 -->
            <div class="z_l" v-if="iszl">
              <div class="lx"></div>
              <div class="fx">
                <el-checkbox-group v-model="bparr">
                  <el-checkbox v-for='bj in bjList' :key='bj.name' :label="bj.name" @change='dlayer(bparr, bj)'>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 线 -->
            <div class="z_l1" v-if="iszs">
              <div class="lx"></div>
              <div class="fx" style="width: 1.2rem;">
                <el-checkbox-group v-model="blarr">
                  <el-checkbox v-for='bl in bmList' :key='bl.name' :label="bl.name" @change="dlayer(blarr, bl)">
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 动物植物 -->
            <div class="z_l" style="left: 2rem" v-if="issl">
              <div class="lx"></div>
              <div class="fx">
                <div class="jgcs">
                  <div v-for="i in list" :key="i.id" @click="xzwz(i)">
                    <div>{{ i.name }}</div>
                    <div>{{ i.cishu }}条</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--    显示经纬度容器 B-->
        <!-- <div id="mouse-position"></div> -->
        <!-- 动物发现频次 -->
        <div class="map_floor" v-show="Toggle">
          <div class="map_left" style="margin-left: .08rem;">
            <myMonth :My="My" :key="'20' + Date.now()"></myMonth>
          </div>
          <div class="map_left" style="margin-right: .08rem;">
            <myDay :Dy="Dy" :key="'21' + Date.now()"></myDay>
          </div>
        </div>
        <div class="zhankaiceng" v-show="aaa">
          <!-- 控制 -->
          <div @click="btn_T">
            <img src="../../static/mapimg/guan.png" alt="" style="width: 0.32rem; height: 0.64rem">
          </div>
          <!-- 动植物详情 -->
          <div class="wgp">
            <div>
              <div class="wgp_c_t">
                <div>
                  <span style="margin-right: .16rem">{{ mmname }}</span><span style="color: #999999">{{ robj.latinName
                  }}</span>
                </div>
                <!-- <div class="el-icon-close" @click="cwgp"></div> -->
              </div>
              <!-- 主要生境 B -->
              <div class="sjhj">
                <div>
                  <span>发现频次</span>
                </div>
                <div class="clearfix">
                  <div>{{ robj.totalNum }}次</div>
                </div>
              </div>
              <div class="sjhj">
                <div>
                  <span>分布网格</span>
                </div>
                <div class="clearfix">
                  <div v-for="i in robj.gridCount" :key="i.id">{{ i }}</div>
                </div>
              </div>
              <div class="sjhj">
                <div>
                  <span>主要生境</span>
                </div>
                <div class="clearfix">
                  <div v-for="i in robj.shengjing" :key="i.id">{{ i }}</div>
                </div>
              </div>
              <!-- 主要生境 E -->
              <!-- 近期发现 B -->
              <div class="jqfx">
                <div><span>近期发现</span></div>
                <div class="pic">
                  <!-- 查看更多 -->
                  <div><span></span></div>
                  <div class="imb">
                    <div v-for="i in datalist" :key="i.id" @click="btn_img(i)">
                      <img :src="iscloud(i.path)" v-if="isMp4(i.accessorySrc) == '照片'" alt="" />
                      <img src="/static/mapimg/shipin.jpg" v-else alt="" />
                    </div>
                    <!-- <div>
                      <img src="../../static/images/fgx.png" alt="">
                      <img src="../../static/images/fgx.png" alt="">
                    </div> -->
                  </div>
                </div>
              </div>
              <!-- 近期发现 E -->
              <!-- 最近 B -->
              <div style="display: flex">
                <div class="sjhj" style="flex: 1">
                  <div>
                    <span>最近一月</span>
                  </div>
                  <div class="clearfix">
                    <div>{{ robj.monthNum }}次</div>
                  </div>
                </div>
                <div class="sjhj" style="flex: 1">
                  <div>
                    <span>最近一周</span>
                  </div>
                  <div class="clearfix">
                    <div>{{ robj.weekNum }}次</div>
                  </div>
                </div>
              </div>
              <!-- 最近 E -->
              <div class="ecb" id="mypc"></div>
              <div class="ecb" id="mypc2"></div>
              <!-- <div class="ecb" id="mypc3"></div> -->
            </div>
          </div>
        </div>
        <!-- 遮罩展开按钮 B -->
        <div class="gban" @click.stop="openzkcs" v-show="Toggles">
          <img src="../../static/mapimg/guan.png" alt="" />
        </div>
        <!--  选择 B  -->
        <div class="tcxz" v-show="false">
          <el-radio v-model="dpe" label="1" style="color: #fff; margin-bottom: 0.16rem" @change="qhfbt">常见物种分布图
          </el-radio>
          <el-radio v-model="dpe" label="2" style="color: #fff" @change="qhfbt">重点物种分布图</el-radio>
        </div>
        <!-- 弹窗查看更多图片 B -->
        <div class="moreimg" v-if="ismore">
          <!-- 关闭 B -->
          <div @click.stop="ismore = false" class="el-icon-close"></div>
          <!-- 关闭 E -->

          <div class="mmbox">
            <div class="left_img">
              <div>
                <span style="font-size: 0.18rem; color: #fff; margin-right: 0.16rem">{{ mname }}</span>
                <span style="color: #999999">{{ mtime }}</span>
              </div>

              <div>
                <img v-if="isMp4(mbig) == '照片'" :src="masterMap(mbig)" alt="" />
                <video v-else :src="mbig" alt="" controls></video>
                <!-- <img src="/static/mapimg/dw.png" alt=""> -->
              </div>

              <div>
                <span style="color: #fff">{{ min }}</span><span style="color: #abb1bf">/{{ mlist.length }}</span>
              </div>
            </div>
            <div class="right_tb">
              <div @click.stop="got">
                <span class="el-icon-arrow-up"></span>
              </div>
              <div>
                <ul class="clearfix" id="ulbox" :style="{ height: mlist.length * 1.3 + 'rem' }">
                  <li v-for="m in mlist" :key="m.id">
                    <img v-if="isMp4(m.path) == '照片'" :src="iscloud(m.path)" alt="" />
                    <img v-else src="/static/mapimg/shipin.jpg" alt="" />
                  </li>
                </ul>
              </div>
              <div>
                <span class="el-icon-arrow-down"></span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!--中间 E-->

    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <!-- 发现频次最多top10物种 -->
        <myTop :topTen="topTen" :key="'02' + Date.now()"></myTop>
        <!-- 动物保护等级统计 -->
        <myRightZoonclass :Plantprotection="Plantprotection" :key="'2' + Date.now()"></myRightZoonclass>
        <!-- 植物IUCN红色名录统计 -->
        <myRightiucn :Plantiucn="Plantiucn" :key="'3' + Date.now()"></myRightiucn>
        <!-- <div class="sstitles">
            <div class="twzs">
              <span class="dwz">物种统计</span>
              <br/>
              <span class="xwz">Species statistics</span>
            </div>
          </div> -->
        <!--标题 E-->

        <!--统计图 B-->
        <!-- <div class="stjqy">
            <div id="pie" style="overflow: hidden"></div>
            <div style="position: relative">
              <div class="ext">
                <div></div>
                <div><span>动物统计</span></div>
              </div>
              <div id="bar1" style="width: 100%;height: 100%;"></div>
            </div>
            <div style="position: relative">
              <div class="ext">
                <div style="background-color: #FFF27F;"></div>
                <div><span>植物统计</span></div>
              </div>
              <div id="bar2" style="width: 100%;height: 100%;"></div>
            </div>
          </div> -->
        <!--统计图 E-->
      </div>
    </div>
    <!--右边 E-->
    <!-- 地图弹窗 -->
    <div style='display: none'>
      <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer" @click="closer"></a>
        <div id="popup-content" ref="content">
          <div class="mapImgBox">
            <div class="mapImgBox-txt">
              <span style="color: #FFF;font-size: .16rem">{{ pop_name }}</span>
              <span style="color: rgba(255, 255, 255, 0.70);font-size: .14rem;margin-left: .15rem;">{{ pop_time }}</span>
            </div>
            <img v-show="isMp4(iscloud(pop_img)) == '照片'" :src="masterMap(pop_img)" alt="">
            <video v-show="isMp4(iscloud(pop_img)) == '视频'" controls autoplay :src="iscloud(pop_img)"></video>
          </div>

          <div class="isshowdetails">
            <div class="isshowdetailsbtn" @click="owgp(Bigimg)">
              <span>查看更多</span>
            </div>
          </div>

          <!--<div class='l_t'>-->
          <!--<span v-for='t in pop_List'>{{t.name}}：<span-->
          <!--style='color: #909399'>{{t.value == '' ? '暂无' : t.value}}</span></span>-->
          <!--</div>-->
          <!--<div class='l_p' @click="fimg(pop_P)" v-show="isshowP">-->
          <!--<img v-if="isMp4(iscloud(pop_P)) =='照片'" :src="iscloud(pop_P)" alt="">-->
          <!--<img v-if="isMp4(iscloud(pop_P)) =='视频'" src="../../static/images/shipin.jpg" alt="">-->
          <!--</div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import olMap from "ol/Map";
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon } from 'ol/style';
import { Heatmap as HeatmapLayer } from 'ol/layer';

import * as olProj from "ol/proj";
// import {FullScreen, defaults as defaultControls} from 'ol/control';
import { defaults as defaultControls, FullScreen, OverviewMap } from "ol/control";
import { Image as ImageLayer, Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import ImageWMS from 'ol/source/ImageWMS';
import MousePosition from 'ol/control/MousePosition';
import { createStringXY } from 'ol/coordinate';
import Overlay from 'ol/Overlay';
import myDay from "./module/myDay.vue";
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";
import mychart from "./module/mychart.vue";
// 左边
import myTotal from "./module/mytotal.vue";
import myZoon from "./module/myZoon.vue";
import myZoonclass from "./module/myZoonclass.vue";
import myIucn from "./module/myIucn.vue";
//右边
import myTop from "../components/module/myTop.vue";
import myRightZoonclass from "./module/myRightZoonclass.vue";
import myRightiucn from "./module/myRightiucn.vue";
// 中间
import myMonth from "./module/myMonth.vue";
// import Clickoutside from 'element-ui/src/utils/clickoutside';
const Clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {
  },
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}
export default {
  components: {
    myTotal,
    myZoon,
    myZoonclass,
    myIucn,
    myTop,
    myRightZoonclass,
    myRightiucn,
    mychart,
    myMonth,
    myDay,
  },
  name: "Newbdzy",
  data() {
    return {
      aaa: false,
      iszl: false,
      iszs: false,
      issl: false,
      blarr: ['网格'],
      iszkc: false,
      map: null,
      wuzhong: {},
      keys: 0,
      topTen: [], // top10
      animals: [], // 动物种类统计
      animalsprotection: [], // 动物保护统计
      Animaliucn: [], // 动物IUCN
      Plantiucn: [], // 动物IUCN
      Plantprotection: [], // 植物保护统计
      keyword: "",
      center: [], // 中心位置
      vectorSource: null,//图层源
      drawMesasure: null,
      bmList: [],
      restaurants: [],
      state1: '动物',
      Toggle: true,
      bjList: [],
      list: [],
      keywords: "",
      month: "",
      My: [],
      Dy: [],
      plist: [],
      dpe: '1',
      levelNumber: 9,
      mmname: "",
      totalMap: {},
      min: 0,
      level: 8,
      bparr: [],
      pop_P: [],
      isdetails: false,
      Toggles: false,
      pop_name: '',
      pop_time: '',
      pop_img: '',
      pop_video: '',
      isdetailsTetx: "",
      isdetailsLink: "",
      trackLine: {},
      robj: {},
      datalist: [],
      ismore: false,
      Bigimg: [],
      navigationType: '',
    };
  },
  created() {
    this.areaId = window.sessionStorage.getItem("areaId");
  },
  mounted() {
    let vm = this
    vm.getspeciesCount();
    vm.getTopten();
    vm.getAnimals();
    vm.getPlants();
    setTimeout(function () {
      vm.getsd()
    }, 500);

  },
  directives: { Clickoutside },
  methods: {
    Mrlayers() {
      let vm = this;
      (async function () {
        let res = await http.get(api.getLayers, {
          areaId: vm.areaId
        })
        if (res.data.status == 'success') {
          vm.bmList = res.data.data.polygon;
          vm.bjList = res.data.data.point;

          // setTimeout(function () {
          //   vm.bmList.forEach(e => {
          //     if (e.isShow) {
          //       vm.dlayer([e.name], e)
          //       vm.blarr.push(e.name)
          //     }
          //   })
          // }, 300)
        } else {
          alert('服务器异常，联系后台管理员！')
        }
      })()
    },
    btn_img(i) {
      let arr = [];
      arr.push({path:i.accessorySrc});
      this.mlist = arr;
      this.mname = i.speciesName;
      this.mtime = i.shootingTime;
      this.mbig = i.accessorySrc;
      this.ismore = true
    },
    // getType() {
    //   let vm = this;
    //   const navigationEntries = window.performance.getEntriesByType('navigation');
    //   vm.navigationType = navigationEntries.length > 0 ? navigationEntries[0].type : '';
    //   if (vm.navigationType === 'reload') {
    //     console.log('页面刷新了');
    //     // vm.getType();
    //   } else {
    //     console.log('页面未刷新');
    //   }
    //   console.log(this.navigationType);
    //   if (this.navigationType === 'reload') {
    //     this.keys++
    //     console.log(this.keys);
    //   }
    // },
    btnToggle1() {
      this.iszl = !this.iszl
      if (this.iszl == true) {
        this.iszs = false
      }
    },
    btnToggle2() {
      this.iszs = !this.iszs
      if (this.iszs == true) {
        this.iszl = false
      }
    },
    btn_qh(e) {
      if (e) {
        this.iszs = false
        this.iszl = false
      }
    },
    xzwz(data) {
      this.keywords = data.name;
      this.issl = false;
    },
    // 全部种类数量统计
    getspeciesCount() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.speciesCount + vm.areaId);
        vm.wuzhong = res.data.data;
      })();
    },
    // top10物种
    getTopten() {
      let vm = this;
      (async function () {
        let res = await http.get(api.getSpecies + vm.areaId);
        vm.topTen = res.data.data;
      })();
    },
    // 动物种类统计
    getAnimals() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.AnimalSpecies + vm.areaId);
        vm.animals = res.data.data.fenleiCount; // 动物物种
        vm.animalsprotection = res.data.data.protectLevelCount; // 动物保护等级统计
        vm.Animaliucn = res.data.data.endangeredLevelCount  // 动物iucn
      })()
    },
    // 植物种类统计
    getPlants() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.PlantSpecies + vm.areaId);
        vm.Plantprotection = res.data.data.protectLevelCount; // 植物保护等级统计
        vm.Plantiucn = res.data.data.endangeredLevelCount  // 植物iucn
      })()
    },
    // 每天、每月
    getCount() {
      var vm = this;
      (async function () {
        let res = await http.get(api.monthDayApi, {
          areaId: vm.areaId,
          type: vm.state1,
          speciesName: vm.keywords
        });
        if (res.data.code == '200') {
          vm.robj = res.data.data;
          vm.datalist = vm.robj.mediaList.slice(0, 3)
          vm.My = res.data.data.monthTimCount
          vm.Dy = res.data.data.dayTimeCount
          let x1 = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            color1 = ['rgba(0, 204, 70, 1)', 'rgba(255, 248, 72, 0.5)'],
            title1 = '每月发现频次',
            y1 = res.data.data.monthTimCount,
            x2 = ['0点', '2点', "4点", "6点", "8点", "10点", "12点", "14点", "16点", "18点", "20点", "22点"],
            color2 = ['rgba(0, 109, 238, 1)', 'rgba(72, 255, 222, 0.5)'],
            title2 = '每天各时段发现频次',
            y2 = res.data.data.dayTimeCount;

          vm.chart("mypc", x1, y1, color1, title1);
          vm.chart("mypc2", x2, y2, color2, title2);
        } else {
          alert('服务器异常，联系后台管理员！')
        }
      })()
    },
    //创建地图andcesium
    creationMap() {
      var container = document.getElementById('popup');
      this.puplay = new Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      });
      this.Map = new olMap({
        target: 'map',
        layers: [],
        overlays: [this.puplay],
        // overlays: [this.overlay],
        controls: defaultControls({
          attribution: false,
          zoom: false,
          rotate: false
        }).extend([new OverviewMap()]),
        view: new View({
          //设置中心点
          center: olProj.fromLonLat(this.center),
          zoom: 11
        })
      });
      //创建底图图层
      //创建图层对象
      this.totalMap["bsaeMap"] = new TileLayer({
        source: new XYZ({
          url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=bac73ffb71b5b713a658ee1ed8c7ffd9'
        })
      })
      this.Map.addLayer(this.totalMap["bsaeMap"]);
      this.Map.addControl(new FullScreen());
      document.addEventListener('fullscreenchange', (event) => {
        if (document.fullscreenElement) {
          this.Toggle = false;
          // this.Toggles = false;
          this.aaa = true;
          // 执行进入全屏时的逻辑...
        } else {
          this.Toggle = true;
          this.Toggles = false;
          this.aaa = false;
          // 执行退出全屏时的逻辑...
        }
      });
      //移入鼠标显示经纬度
      // var mousePositionControl = new MousePosition({
      //   coordinateFormat: createStringXY(4),
      //   projection: 'EPSG:4326',
      //   // comment the following two lines to have the mouse position
      //   // be placed within the map.
      //   className: 'custom-mouse-position',
      //   target: document.getElementById('mouse-position'),
      //   undefinedHTML: '&nbsp;'
      // });
      // this.Map.addControl(mousePositionControl);
      var _self = this;
      this.Map.on('singleclick', function (event) {
        var feature = _self.Map.forEachFeatureAtPixel(event.pixel,
          function (feature, layer) {
            return feature;
          });
        var coordinate = event.coordinate;
        console.log(feature.get("data"));
        if (typeof (feature) != "undefined") {
          if (feature.get("data") != undefined) {
            let id = feature.get("data").id;
            let type = feature.get("data").type;
            (async function () {
              let res = await http.get(api.speciesInfoApi + id + '&type=' + type);
              if (res.data.code == '200') {
                _self.pop_name = res.data.data.name;
                _self.pop_time = res.data.data.time
                _self.pop_img = res.data.data.mediaList[0].path
                _self.Bigimg = res.data.data
              }
            })()
            _self.puplay.setPosition(coordinate);
          }
        }
      });

      this.Mrlayers();
    },
    //编辑图层
    setLayerModify(uniqueId) {
      var modify = new Modify({ source: this.totalMap[uniqueId].getSource() });
      let arr = this.Map.getInteractions();
      let vm = this;
      arr.forEach(e => {
        if (e instanceof Modify) {
          this.Map.removeInteraction(e);
        }
      })
      this.Map.addInteraction(modify);
    },
    //将图层生成geojson数据
    saveLayerToGeojson(uniqueId) {
      let featureArr = this.totalMap[uniqueId].getSource().getFeatures();
      let geojson = (new GeoJSON({
        defaultDataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857'
      })).writeFeatures(featureArr);
      return geojson;
    },
    // 图层
    getLaylist() {
      let vm = this;
      (async function f() {
        let res = await http.get(api.LayerApi + vm.areaId);
      })()

    },
    //绘制wms类型
    drawWMS(item, url, name, styleId, cql) {
      if (typeof (this.totalMap[item]) == "undefined") {
        let params = {
          'LAYERS': name,
          'STYLES': styleId,
          'CQL_FILTER': "[" + cql + "]"
        };
        this.totalMap[item] = new ImageLayer({
          source: new ImageWMS({
            url: url,
            params: params,
            serverType: 'geoserver'
          })
        })
        this.Map.addLayer(this.totalMap[item]);
      }
    },
    //绘制XYZ类型
    drawXYZ(item, url) {
      if (typeof (this.totalMap[item]) == "undefined") {
        this.totalMap[item] = new TileLayer({
          source: new XYZ({
            url: url
          })
        },
        )
        this.Map.addLayer(this.totalMap[item])
      }
    },
    //绘制wmts类型
    drawWMTS(item, url, layer, matrixSet, format, style) {
      if (typeof (this.totalMap[item]) == "undefined") {
        var projection = olProj.get('EPSG:4326');
        var projectionExtent = projection.getExtent();
        var size = getWidth(projectionExtent) / 256;
        var resolutions = new Array(14);
        var matrixIds = new Array(14);
        for (var z = 0; z < 14; ++z) {
          resolutions[z] = size / Math.pow(2, z);
          matrixIds[z] = z;
        }
        this.totalMap[item] = new TileLayer({
          source: new WMTS({
            url: url,
            layer: layer,
            matrixSet: matrixSet,
            format: format,
            projection: projection,
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),
              resolutions: resolutions,
              matrixIds: matrixIds
            }),
            style: style
          })
        });
        this.Map.addLayer(this.totalMap[item])
      }
    },
    // 保护区
    // getEvenDetail() {
    //   let vm = this;
    //   (async function f() {
    //     let res = await http.get(api.EvenDetail + vm.areaId)
    //     vm.center = [res.data.mapConfig.lon, res.data.mapConfig.lat];
    //     vm.creationMap()
    //   })()
    // },
    //手动定位
    artificialLocation(data, lc) {
      var coordinate = olProj.fromLonLat(lc);
      var closer = document.getElementById('popup-closer');
      this.puplay.setPosition(undefined);
      closer.blur();
      let x = [], y = [];
      x = data.mtl;
      y = data.mediaList;
      this.pop_List = x.concat([]);
      this.pop_P = y.concat([]);
      this.isdetails = data.isdetails;
      this.isdetailsTetx = data.isdetailsTetx;
      this.isdetailsLink = data.isdetailsLink;
      if (data.hasOwnProperty('showpic')) {
        this.isshowP = false
      }
      this.puplay.setPosition(coordinate);
    },
    //地图定位totalMap
    MapGPS(x, y) {
      let jw = [x, y];
      this.Map.getView().setCenter(olProj.transform(jw, 'EPSG:4326', 'EPSG:3857'));
    },
    //绘制geojson类型
    previewshape(data, id) {
      var vm = this;
      //判断是否已经存在相同id的图层 如果有删掉，再重新绘制
      if (typeof (this.totalMap[id]) != "undefined") {
        this.Map.removeLayer(this.totalMap[id]);
        delete this.totalMap[id];
      }
      let styleFunction = function () {
        return function (feature, resolution) {
          ;
          //点
          if (feature.getGeometry().getType() == 'Point') {
            if (feature.get('fillColor').indexOf('#') != -1) {
              var point = new Style({
                image: new CircleStyle({
                  radius: feature.get("radius"),
                  fill: new Fill({
                    color: feature.get("fillColor")
                  }),
                  stroke: new Stroke({
                    color: feature.get("borderColor"),
                    width: feature.get("size")
                  })
                }),
                text: new Text({
                  font: '.12rem Calibri,sans-serif',
                  text: feature.get('text'),
                  fill: new Fill({
                    color: feature.get('fillColor')
                  }),
                  offsetY: 15,
                  stroke: new Stroke({
                    color: 'white',
                    width: 1
                  }),
                })
              })
            } else {
              var point = new Style({
                image: vm.addImage(feature, resolution),
                text: new Text({
                  font: '.12rem Calibri,sans-serif',
                  text: feature.get('text'),
                  fill: new Fill({
                    color: feature.get('fillColor')
                  }),
                  offsetY: 15,
                  stroke: new Stroke({
                    color: 'white',
                    width: 1
                  }),
                })
              })
            }
            return [point]
          }
          if (feature.getGeometry().getType() == 'MultiPoint') {
            var MultiPoint = new Style({
              image: new CircleStyle({
                radius: 5,
                fill: new Fill({
                  color: feature.get("fillColor")
                }),
                stroke: new Stroke({
                  color: feature.get("borderColor"),
                  width: feature.get("size")
                })
              }),
              text: new Text({
                font: '.12rem Calibri,sans-serif',
                text: feature.get('text'),
                fill: new Fill({
                  color: feature.get('fillColor')
                }),
                offsetY: 15,
                stroke: new Stroke({
                  color: 'white',
                  width: 1
                }),
              })
            })
            return [MultiPoint]
          }
          //面
          if (feature.getGeometry().getType() == 'MultiPolygon') {
            var MultiPolygon = new Style({
              stroke: new Stroke({
                color: feature.get('borderColor'),
                width: feature.get("size")
              }),
              fill: new Fill({
                color: feature.get("fillColor")
              }),
              text: new Text({
                font: '.16rem Calibri,sans-serif',
                text: feature.get('text'),
                fill: new Fill({
                  color: feature.get('textColor')
                }),
                stroke: new Stroke({
                  color: feature.get('textColor'),
                  width: 1
                })
              })
            })
            return [MultiPolygon]
          }
          if (feature.getGeometry().getType() == 'Polygon') {
            var Polygon = new Style({
              stroke: new Stroke({
                color: feature.get('borderColor'),
                width: feature.get("size")
              }),
              fill: new Fill({
                color: feature.get("fillColor")
              }),
              text: new Text({
                font: '.12rem Calibri,sans-serif',
                text: feature.get('text'),
                fill: new Fill({
                  color: feature.get('borderColor')
                }),
                stroke: new Stroke({
                  color: 'white',
                  width: 3
                }),
              })
            })
            return [Polygon]
          }
          //线
          if (feature.getGeometry().getType() == 'LineString') {
            var LineString = new Style({
              stroke: new Stroke({
                color: feature.get('borderColor'),
                width: 7
              }),
              fill: new Fill({
                color: feature.get("fillColor"),
                width: 1
              }),
              text: new Text({
                font: '.12rem Calibri,sans-serif',
                text: feature.get('text'),
                fill: new Fill({
                  color: 'white'
                }),
                stroke: new Stroke({
                  color: 'block',
                  width: 4
                }),
              })
            })
            return [LineString]
          }
          //多线
          if (feature.getGeometry().getType() == 'MultiLineString') {
            var MultiLineString = new Style({
              stroke: new Stroke({
                color: feature.get('borderColor'),
                width: feature.get("size") + 5
              }),
              text: new Text({
                font: '.12rem Calibri,sans-serif',
                text: feature.get('text'),
                fill: new Fill({
                  color: 'white'
                }),
                stroke: new Stroke({
                  color: 'block',
                  width: 5
                }),
              })
            })
            return [MultiLineString]
          }
        }
      };
      let geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:4326'
          }
        },
        'features': []
      };
      this.vectorSource = new VectorSource({
        features: (new GeoJSON(
          {
            defaultDataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
          }
        )).readFeatures(geojsonObject)
      });
      this.totalMap[id] = new VectorLayer({
        source: this.vectorSource,
        style: styleFunction()
      });
      let sources = this.totalMap[id].getSource();
      data.forEach((e => {
        sources.addFeatures(
          (new GeoJSON({
            defaultDataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
          })).readFeatures({
            "id": e.id,
            "properties": {
              "name": e.name,
              "borderColor": e.borderColor,
              "fillColor": e.fillColor,
              "size": e.size,
              "iconSrc": e.iconSrc,
              "radius": 6,
              "isdetails": e.isdetails,
              "isdetailsTetx": e.isdetailsTetx,
              "isdetailsLink": e.isdetailsLink,
              "text": e.name,
              "data": e.data,
              "textColor": e.textColor,
              'customid': e.id
            },
            "lineId": e.lineId,
            'type': 'Feature',
            'geometry': e.geojson
          }))
      }));
      this.totalMap[id].set("altitudeMode", "clampToGround");
      this.Map.addLayer(this.totalMap[id]);
      //绘制点线的时候  给  图层id 加上 @Point||@LineString  然后给点线的层级设高 高于面的
      // 避免显示地图弹窗的时候 面遮住点线 点击不到 点线的feature
      var drawType = id.split("_");
      if (drawType[drawType.length - 1] == 'Point') {
        this.totalMap[id].setZIndex(299 + this.levelNumber);
      }
      if (drawType[drawType.length - 1] == 'LineString') {
        this.totalMap[id].setZIndex(199 + this.levelNumber);
        //          dw
        let jw = data[data.length - 1].dw;
        //          this.Map.getView().setCenter(olProj.transform(jw, 'EPSG:4326', 'EPSG:3857'));
      }
      let centerid = data[0].id;
      let thisfeature = this.vectorSource.getFeatureById(centerid);
      let center = thisfeature.getGeometry().getFirstCoordinate();
      this.Map.getView().setCenter(center);
    },
    // 绘制热力图
    drawHeatMap(uniqueId, fenbu) {
      //判断是否已经存在相同id的图层 如果有删掉，再重新绘制
      if (typeof (this.totalMap[uniqueId]) != "undefined") {
        this.Map.removeLayer(this.totalMap[uniqueId]);
        delete this.totalMap[uniqueId];
      }
      /**geojson数据 绘制热力图**/
      let geojsonObject = {
        'type': 'FeatureCollection',
        "crs": {
          "type": "name",
          "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
          }
        },
        'features': []
      };
      for (var i = 0; i < fenbu.length; i++) {
        var feature = {
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': olProj.transform(fenbu[i], 'EPSG:4326', 'EPSG:3857')
          }
        };
        geojsonObject.features.push(feature);
      }

      let heatmap = new HeatmapLayer({
        source: new VectorSource({
          features: (new GeoJSON()).readFeatures(geojsonObject)
        }),
        blur: parseInt(10, 10),
        radius: parseInt(5, 10)
      });
      this.totalMap[uniqueId] = heatmap;
      this.Map.addLayer(heatmap);
    },
    // 动植物搜索
    btn_ss() {
      var vm = this;
      (async function () {
        let res = await http.get(api.SearchApi, {
          areaId: vm.areaId,
          type: vm.state1,
          speciesName: vm.keywords
        })
        if (res.data.code == '200') {
        } else {
          alert('服务器异常，联系后台管理员！')
        }
        if (res.data.code == '200' && res.data.data.length > 0) {

          // let re = await http.get(api.EvenDetail + vm.areaId)
          // vm.center = [re.data.mapConfig.lon, re.data.mapConfig.lat];
          // vm.level = re.data.mapConfig.level;
          // vm.creationMap();
          vm.plist = res.data.data;
          var arr = [], point = [];
          res.data.data.forEach(t => {
            let img = '', textColor = '';
            if (vm.state1 == '动物') {
              img = '/static/images/animal-anchor_bottom_center.png'
              textColor = '#09E1FF'
            }
            if (vm.state1 == '植物') {
              img = '/static/images/plant-anchor_bottom_center.png'
              textColor = '#FFC226'
            }
            var z = {
              id: t.id,
              name: t.name,
              borderColor: "",
              fillColor: "",
              iconSrc: img,
              textColor: textColor,
              data: {
                type: vm.state1,
                id: t.id
              },
              geojson: { coordinates: [t.lon, t.lat], type: "Point" }
            }

            arr.push(z)
            point.push([t.lon, t.lat]);
          })
          vm.previewshape(arr, "alread_Point");
          // vm.drawHeatMap("alread_Point", point);
          if (vm.keywords == '') {
            vm.mmname = vm.state1;
          } else {
            vm.mmname = vm.keywords;
          }
          vm.getCount();
        } else {
          alert(res.data.message)
        }
      })()
    },
    getsd() {
      var vm = this;
      (async function () {
        let res = await http.get(api.SearchApi, {
          areaId: vm.areaId,
          type: vm.state1,
          speciesName: vm.keywords
        })
        if (res.data.code == '200') {
        } else {
          alert('服务器异常，联系后台管理员！')
        }
        if (res.data.code == '200' && res.data.data.length > 0) {
          (async function () {
            let re = await http.get(api.EvenDetail + vm.areaId)
            vm.center = [re.data.mapConfig.lon, re.data.mapConfig.lat];
            vm.level = re.data.mapConfig.level;
            vm.creationMap();
            vm.plist = res.data.data;
            var arr = [], point = [];
            res.data.data.forEach(t => {
              let img = '', textColor = '';
              if (vm.state1 == '动物') {
                img = '/static/images/animal-anchor_bottom_center.png'
                textColor = '#09E1FF'
              }
              if (vm.state1 == '植物') {
                img = '/static/images/plant-anchor_bottom_center.png'
                textColor = '#FFC226'
              }
              var z = {
                id: t.id,
                name: t.name,
                borderColor: "",
                fillColor: "",
                iconSrc: img,
                textColor: textColor,
                data: {
                  type: vm.state1,
                  id: t.id
                },
                geojson: { coordinates: [t.lon, t.lat], type: "Point" }
              }

              arr.push(z)
              point.push([t.lon, t.lat]);
            })
            // vm.previewshape(arr, "alread_Point");
            vm.drawHeatMap("alread_Point", point);
            if (vm.keywords == '') {
              vm.mmname = vm.state1;
            } else {
              vm.mmname = vm.keywords;
            }
            vm.getCount();
          })()
        } else {
          alert(res.data.message)
        }
      })()
    },
    getsl() {
      let vm = this;
      (async function () {
        let res = await http.get(api.DataApi, {
          areaId: vm.areaId,
          type: vm.state1,
          keywords: vm.keywords,
        })
        if (res.data.code == '200') {
          vm.issl = true;
          vm.list = res.data.data;
        } else {
          alert('服务器异常，联系后台管理员！')
        }
      }

      )()
    },
    qhfbt() {
      var arr = [], point = [];
      this.plist.forEach(t => {
        let img = '', textColor = '';
        if (this.state1 == '动物') {
          img = '/static/images/animal_anchor_bottom_center.png'
          textColor = '#09E1FF'
        }
        if (this.state1 == '植物') {
          img = '/static/images/plant_anchor_bottom_center.png'
          textColor = '#FFC226'
        }
        var z = {
          id: t.id,
          name: t.name,
          borderColor: "",
          fillColor: "",
          iconSrc: img,
          textColor: textColor,
          data: {
            type: this.type,
            id: t.id
          },
          geojson: { coordinates: [t.lon, t.lat], type: "Point" }
        }
        arr.push(z)
        point.push([t.lon, t.lat]);
      })
      if (this.dpe == 1) {
        if (arr.length != 0) {
          this.previewshape(arr, "alread_Point");
        }
      }

      if (this.dpe == 2) {
        if (point.length != 0) {
          this.drawHeatMap("alread_Point", point);
        }
      }
    },
    handleClose() {
      this.issl = false;
    },
    chart(refName, xd, yd, acr, bt) {
      let myChart = echarts.getInstanceByDom(
        document.getElementById(refName)
      );
      if (myChart == undefined) {
        myChart = echarts.init(document.getElementById(refName));
      }
      let option = {
        title: {
          text: bt,
          x: 'center',
          textStyle: {
            color: '#fff'  // 设置标题字体颜色
            // 其他样式属性...
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xd
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          axisTick: {
            //y轴刻度线
            show: false
          }
        },
        series: [
          {
            data: yd,
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            smooth: true,
            itemStyle: {
              color: acr[0]
            },
            lineStyle: {
              width: 3,
              color: acr[1],
              shadowColor: 'rgba(0,0,0,0.1)',
              shadowBlur: 5,
              shadowOffsetY: 5
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: acr[0]
                },
                {
                  offset: 1,
                  color: acr[1]
                }
              ])
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //框选网格
    BoxSelection(flag, uniqueId) {
      var select = new Select();
      this.Map.addInteraction(select);
      var selectedFeatures = select.getFeatures();
      var dragBox = new DragBox({
        condition: platformModifierKeyOnly
      });
      this.Map.addInteraction(dragBox);
      var vm = this;
      if (flag) {
        dragBox.on('boxend', function () {
          var rotation = vm.Map.getView().getRotation();
          var oblique = rotation % (Math.PI / 2) !== 0;
          var candidateFeatures = oblique ? [] : selectedFeatures;
          var extent = dragBox.getGeometry().getExtent();
          vm.totalMap[uniqueId].getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
            candidateFeatures.push(feature);
          });
          if (oblique) {
            var anchor = [0, 0];
            var geometry = dragBox.getGeometry().clone();
            geometry.rotate(-rotation, anchor);
            var extent$1 = geometry.getExtent();
            candidateFeatures.forEach(function (feature) {
              var geometry = feature.getGeometry().clone();
              geometry.rotate(-rotation, anchor);
              if (geometry.intersectsExtent(extent$1)) {
                selectedFeatures.push(feature);
              }
            });
          }
        });
        dragBox.on('boxstart', function () {
          selectedFeatures.clear();
        });
        selectedFeatures.on(['add', 'remove'], function () {
          vm.bsl = selectedFeatures.getArray().map(function (feature) {
            return feature.get('customid');
          });
          vm.addContextMenu();
        });

      }
    },
    //切换底图
    switchBmap(g) {
      //首先先清除之前的底图
      this.Map.removeLayer(this.totalMap.bsaeMap);
      delete this.totalMap.bsaeMap;
      //判断文件类型
      if (g.layerType == "xyz") {
        this.drawXYZ('bsaeMap', g.layerUrl);
      }
      if (g.layerType == "wms") {
        this.drawWMS('bsaeMap', g.layerUrl, g.layerName, g.styleId, g.cql);
      }
      if (g.layerType == "wmts") {
        this.drawWMTS('bsaeMap', g.layerUrl, g.layerName, g.matrixSet, g.format, g.style)
      }
      //设置底图层级 避免遮挡后续绘制点位
      this.totalMap['bsaeMap'].setZIndex(1);
    },
    //图层选择项addLayeralread_Point
    dlayer(arr, peg) {
      if (arr.indexOf(peg.name) == -1) {
        if (typeof (this.totalMap[peg.id]) != "undefined") {
          this.Map.removeLayer(this.totalMap[peg.id]);
          delete this.totalMap[peg.id];
        }
      } else {
        if (peg.layerType == "wms") {
          this.drawWMS(peg.id, peg.layerUrl, peg.layerName, peg.styleId, peg.cql);
          this.levelNumber++;
          this.totalMap[peg.id].setZIndex(this.levelNumber);
        } else if (peg.layerType == "xyz") {
          this.drawXYZ(peg.id, peg.layerUrl)
          this.levelNumber++;
          this.totalMap[peg.id].setZIndex(this.levelNumber);
        } else if (peg.layerType == "wmts") {
          this.drawWMTS(peg.id, peg.layerUrl, peg.layerName, peg.matrixSet, peg.format, peg.style);
          this.levelNumber++;
          this.totalMap[peg.id].setZIndex(this.levelNumber);
        } else {
          // let then = this;
          // (async function () {
          //   let res = await http.get(api.geoms + "?id=" + peg.id)
          //   then.previewshape(res.data.data, res.data.data[0].layerId);
          //   then.levelNumber++;
          //   then.totalMap[peg.id].setZIndex(then.levelNumber);
          // })();
        }
        //设置图层层级 避免被遮挡

      }
    },
    //清除图层
    dellayer(id) {
      if (typeof (this.totalMap[id]) != "undefined") {
        this.Map.removeLayer(this.totalMap[id]);
        delete this.totalMap[id];
      }
    },
    //改变样式
    changePointStyle(id, arr, fillColor) {
      if (typeof this.totalMap[id] != "undefined") {
        let features = this.totalMap[id].getSource().getFeatures();
        features.forEach(e => {
          arr.forEach(y => {
            if (e.getId() == y) {
              let newPro = e.getProperties();
              newPro.fillColor = fillColor;
              e.setProperties(newPro);
            }
          });
        });
      }
    },
    //点类型绘制图标 需要定位图标位置
    //地图图标位置处理函数
    addImage(feature, resolution) {
      let src = feature.get('iconSrc');
      let anchor = [0, 1];
      //根据图标文件名 设置定位点  地图上放置的图标更改文件名即可保持一致
      if (src != '') {
        if (src.indexOf('anchor_bottom_center') != -1) {
          anchor = [0.5, 1];
        } else if (src.indexOf('anchor_bottom_left') != -1) {
          anchor = [0, 1];
        } else if (src.indexOf('anchor_bottom_right') != -1) {
          anchor = [1, 1];
        } else if (src.indexOf('anchor_center_center') != -1) {
          anchor = [0.5, 0.5];
        } else if (src.indexOf('anchor_top_center') != -1) {
          anchor = [0.5, 0];
        } else if (src.indexOf('anchor_top_left') != -1) {
          anchor = [0, 0];
        } else if (src.indexOf('anchor_top_right') != -1) {
          anchor = [1, 0];
        }
        return new Icon({
          src: feature.get('iconSrc'),
          anchor: anchor,
        });
      }
    },
    //动态添加点位
    addPoint(data, first) {
      let _then = this;
      let route_style = new Style({
        stroke: new Stroke({
          width: 3,
          color: '#FF8300'
        }),
        zIndex: 2
      });
      var aircfaftLayer = new VectorLayer({
        source: new VectorSource(),
      })
      this.Map.addLayer(aircfaftLayer);
      let centerAir = val => {
        this.Map.getView().setCenter(val);
      };
      let coords = data
      if (first) {
        if (typeof (this.totalMap["flightTrackLayer"]) != "undefined") {
          this.Map.removeLayer(this.totalMap["flightTrackLayer"]);
          delete this.totalMap["flightTrackLayer"];
          _then.trackLine = {};
        }
        if (typeof (this.totalMap["flightTrackLayer"]) == "undefined") {
          _then.trackLine = new LineString([]);
          this.totalMap["flightTrackLayer"] = new VectorLayer({
            source: new VectorSource({
              features: [
                new Feature({
                  geometry: _then.trackLine
                })
              ]
            }),
            style: route_style,
            updateWhileInteracting: true,//拖拽时自动更新位置 顺滑拖拽
          });
          this.Map.addLayer(this.totalMap["flightTrackLayer"]);
          this.totalMap["flightTrackLayer"].setZIndex(599);
        }
        coords.forEach(ll => {
          var position = olProj.fromLonLat(ll);
          //标牌
          let point = olProj.transform(ll, 'EPSG:4326', 'EPSG:3857');
          _then.trackLine.appendCoordinate(point);
          //以当前位置为地图中心
          centerAir(position);
        })
      } else {
        coords.forEach(ll => {
          var position = olProj.fromLonLat(ll);
          //标牌
          let point = olProj.transform(ll, 'EPSG:4326', 'EPSG:3857');
          _then.trackLine.appendCoordinate(point);
          //以当前位置为地图中心
          centerAir(position);
        })
      }
      //  this.totalMap["flightTrackLayer"].setZIndex(999);
    },
    //关闭弹窗
    closer() {
      var closer = document.getElementById('popup-closer');
      this.puplay.setPosition(undefined);
      closer.blur();
      return false
    },
    //原图展示
    masterMap(p) {
      if (p.split(":")[0] == "http" || p.split(":")[0] == "https") {
        return p;
      } else if (p == "") {
        return "./../../static/mapimg/no_pic.png";
      } else {
        let arr = p.split("/");
        let str = "orginal_" + p.split("/")[p.split("/").length - 1];
        arr[arr.length - 1] = str;
        arr = arr.join("/");
        return "/papi" + arr;
      }
    },
    //判断云服务or本地服务
    iscloud(p) {
      // 先检查 p 是否被定义
      if (p) {
        if (p.split(":")[0] == 'http') {
          return p + '@oosImage|100h';
        }
        if (p.split(":")[0] == 'https') {
          return p + '?x-amz-process=image/resize,h_100,m_lfit';
        }
      }
      // 如果 p 未定义，你可以选择返回一个默认值或执行其他逻辑
      return 'Default Value';
    },
    //判断文件类型
    isMp4(m) {
      if (m != undefined && m != null) {
        let iv = m.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          return '视频'
        } else {
          return '照片'
        }
      }
    },
    openzkcs(a) {
      this.aaa = true;
      this.Toggles = false;
      // this.getCount();
    },
    owgp(data) {
      console.log(data,'data');
      let arr = [];
      data.mediaList.forEach((e, x) => {
        console.log(x , 'X');
        let z;
        if (x == 0) {
          z = {
            color: true,
            path: e.path
          }
        } else {
          z = {
            color: false,
            path: e.path
          }
        }
        arr.push(z)
      })
      this.mlist = arr;
      this.mname = data.name;
      this.mtime = data.time;
      this.mbig = arr[0].path;
      console.log(this.mlist, 'this.mlist');
      console.log(this.mname, 'this.mname');
      console.log(this.mtime, 'this.mtime');
      console.log(this.mbig, 'this.mbig');
      this.ismore = true
    },
    btn_T() {
      this.Toggles = true;
      this.aaa = false;
    }
  }

};
</script>

<style>
@import "../../static/css/jbxx.css";
</style>
<style>
</style>
